<template>
  <div>
    <div class="headers min-width">
      <div v-if="config.message" class="headers-top">{{config.message}}</div>
      <div class="nav width clear">
        <div class="nav-logo fl">
          <img @click="logosrc('/')" to="/"  :src="config.logo_src">
        </div>
        <div v-if="isswitch">
          <div class="nav-right fr clear">
            <router-link to="/shoppingmall" @click.native="search('/shoppingmall')" class="el-icon-search fl"></router-link>
            <div class="nav-language fl">
              <span :class="{Thickening:lang == 'cn'}" @click="language('cn')" class="language-Chinese">中文</span>
              <span class="Division">|</span>
              <span :class="{Thickening:lang == 'en'}" @click="language('en')" class="language-English">English</span>
            </div>
          </div>

          <div class="nav-router fr clear">
            <div class="product fl" v-for="(item,index) in product" :key="item.id"
                 @click="currentindex('/?productid='+item.id)"
                 :class="{routeren:lang == 'en'}">
              <div :title="lang == 'en'?item.title:''"
                   :class="{headeract:(currentPath == 'product' && currentQuery == item.id)}"
                   class="title">{{item.title}}
              </div>
              <span class="span" v-if="index == 0">new</span>
            </div>
            <div @click="currentindex('shoppingmall')"
                 :class="{routeren:lang == 'en',headeract:currentPath == 'shoppingmall'}"
                 class="item fl" :title="lang == 'en'?$t('message.mall'):''" to="/shoppingmall">{{$t('message.mall')}}
            </div>
            <div @click="currentindex('brand')"
                 :class="{routeren:lang == 'en',headeract:currentPath == 'brand'}"
                 class="item fl" to="/brand"
                 :title="lang== 'en'?$t('message.brand'):''">{{$t('message.brand')}}
            </div>
            <div @click="currentindex('introduce')"
                 :class="{routeren:lang == 'en',headeract:currentPath == 'introduce'}"
                 class="item fl" to="/introduce" :title="lang=='en'?$t('message.companyintroduction'):''">
              {{$t('message.companyintroduction')}}
            </div>
          </div>
        </div>
        <div v-if="close" class="search-box">
          <div class="search">
            <div @click="closesearch" class="el-icon-close"></div>
            <div class="inputbox">
              <input @keyup.enter="inputclick" @focus="block"  @blur="none" type="text"
              :placeholder="$t('message.Searchforproductnames')" v-model="input">
            </div>
            <div @click="inputclick" class="el-icon-search"></div>
          </div>
          <div v-show="History" class="History">
            <div @click="historicalcontent(item)" v-for="(item,index) in searchhistory"
                 :key="index" class="History-title">{{item}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios"

  export default {
    name: 'headers',
    data() {
      return {
        lang:'en',
        config: {},
        product: [],
        isswitch: true,
        close: false,
        input: '', //输入框双向绑定
        currentPath: '',
        currentQuery: 0, //id初始值
        searchhistory:[],
        History:false,
      }
    },
    //钩子函数
    created() {
      this.currentPath = this.$route.name;
      this.currentQuery = parseInt(this.$route.query.productid);
      if (sessionStorage.sitename) {
        this.lang =  sessionStorage.sitename;
      }
      if(this.lang=='cn'){
        document.title = '派实';
      }else{
        document.title = 'purse';
      }
      this.head();
      //判断缓存里是否有搜索历史的值存在
      if(localStorage.input){
        this.searchhistory = JSON.parse(localStorage.input);
      }

    },
    methods: {
      head() {
          //头部缓存cn
        if (sessionStorage.langen == this.lang) {
          this.get()
        }
        if (!sessionStorage.headData || (sessionStorage.langen != this.lang)) {
          this.get()
        } else {
          var data = JSON.parse(sessionStorage.headData);
          this.product = data.product;
          this.config = data.config;
        }
      },
      //接口请求
      get() {
        let _this = this;
        axios.get('system/api/get_nav_bar', {
          params: {
            language: _this.lang,
          }
        }).then((response) => {
          _this.config = response.data.config;
          _this.product = response.data.product;
          sessionStorage.langen = _this.lang;
          sessionStorage.headData = JSON.stringify(response.data);
          if (!_this.currentQuery) {
            _this.currentQuery = _this.product[0].id
          }

          var parameterid = response.data.product[0].id;
          if(_this.currentQuery){
            this.parameter(_this.currentQuery);
          }else {
            this.parameter(parameterid);
          }
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 语言切换
      language(url) {
        this.$i18n.locale = url;
        sessionStorage.sitename = url;
        this.lang = url;
        this.get();
        if(window.location.href.indexOf('/newdetails')>-1){
           this.$router.push('/newlist');
           sessionStorage.url = JSON.stringify('/newlist')
        }
        this.$router.go(0);
      },
      //打开搜索
      search(url) {
        this.isswitch = false;
        this.close = true;
        sessionStorage.url = JSON.stringify(url);
      },
      //关闭搜索
      closesearch() {
        this.close = false;
        this.isswitch = true;
        this.$emit('cllosesearch')
      },
      //定义router跳转
      currentindex(url) {
        sessionStorage.url = JSON.stringify(url);
        this.$router.push(url)
        this.$emit('currentindexs')
      },
      logosrc(url){
        sessionStorage.url = JSON.stringify(url);
        this.$router.push(url)
      },
      //搜索功能向父组件传值，商城页，同时做历史缓存
      inputclick() {
        if (this.input == '') {
          return
        } else {
          if (this.searchhistory.length > 4) {
            var arr = JSON.parse(localStorage.input);
            arr.shift();
            arr.push(this.input);
            localStorage.input = JSON.stringify(arr);
          } else {
            this.searchhistory.push(this.input);
            localStorage.input = JSON.stringify(this.searchhistory);
          }
        }
        this.$emit('headCallBack', this.input);
        this.input = '';
        this.History = false;
      },
      historicalcontent(item){
        this.input = item;
        this.$emit('headCallBack', this.input);
        this.input = '';
        this.History = false;
      },
      //获取与失去焦点显示搜索历史框
      block(){
        if(localStorage.input){
          this.History = true
        }else {
          this.History = false
        }
      },
      none(){
        setTimeout(()=>{
          this.History = false
        },500);
      },
      parameter(id){
        this.$emit('parameterid',id)
      }
    },
  }
</script>
<style scoped>
  .headeract {
    color: #e96f72 !important;
  }
  .Thickening{
    font-weight: bold;
    color: #020202;
  }
  .headers-top {
    background: #c9c9ca;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    color: #595656;
    text-align: center;
  }

  .nav {
    height: 60px;
    line-height: 60px;
  }

  .nav .nav-logo {
    margin-top: 8px;
    width: 75px;
    height: 40px;
    cursor: pointer;
  }
  .nav .nav-logo img{
    width: 100%;
    min-height: 100%;
  }

  .nav .nav-router {
    width: 950px;
    padding-left: 20px;
  }

  .nav .nav-router .product {
    max-width: 140px;
    margin-right: 58px;
    position: relative;
    cursor: pointer;
  }

  .nav .nav-router .product .title {
    font-size: 13px;
    color: #020202;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .routeren {
    margin-right: 45px !important;
  }

  .nav .nav-router .product span {
    position: absolute;
    height: 15px;
    line-height: 6px;
    top: 6px;
    right: -15px;
    font-size: 12px;
    padding: 2px;
    color: #e96f72;
    border: 1px solid #e96f72;
    display: inline;
    z-index: 999;
  }

  .nav .nav-router .item {
    font-weight: bold;
    position: relative;
    font-size: 13px;
    color: #020202;
    max-width: 80px;
    margin-right: 58px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .nav .nav-right .el-icon-search {
    margin-right: 15px;
    margin-top: 21px;
    cursor: pointer;
    font-size: 20px;
    color: #000;
  }

  .nav .nav-right .nav-language {
    font-size: 12px;
    color: #999999;
    cursor: pointer;
    line-height: 60px;
  }

  .nav .nav-right .nav-language .Division {
    margin: 0 4px 4px;
  }

  .nav .search-box {
    position: relative;
  }

  .nav .search-box .search {
    margin-left: 190px;
    height: 60px;
    line-height: 60px;
  }

  .nav .search-box .search .el-icon-close {
    font-size: 23px;
    color: #404040;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }

  .nav .search-box .search .inputbox {
    display: inline-block;
  }

  .nav .search-box .search .inputbox input {
    width: 620px;
    height: 30px;
    outline: none;
    font-size: 15px;
    display: inline-block;
    border: none;
  }

  .nav .search-box .search .el-icon-search {
    font-size: 23px;
    color: #404040;
    vertical-align: middle;
    cursor: pointer;
  }

  .nav .search-box .search-block .title {
    font-size: 14px;
    color: #999;
    margin-top: 12px;
    cursor: pointer;
  }
  .nav .search-box .History{
    background: #fff;
    height: 30px;
    width: 670px;
    left: 192px;
    position: absolute;
    top: 61px;
    z-index: 100;
    padding: 12px 0 86px 0;
    box-sizing: border-box;
  }
  .nav .search-box .History .History-title{
    background: #fff;
    cursor: pointer;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 25px 0 25px;
    color: #999;
    font-size: 14px;
  }
  .nav .search-box .History .History-title:hover{
    background: #f2efef;
  }
</style>
